<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <button id="btn" class="layui-btn"><i class="layui-icon">&#xe67c;</i>上传图片</button>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["upload"], function () {
        // 可在html元素上写配置
        // <button class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}">上传文件</button>
        var upload = layui.upload;
        var uploadInst = upload.render({
          elem: "#btn", // 绑定选择器
          url: "/", // 上传接口
          field: "file", // 设定文件域的字段名
          // data: { id: 1 ,size:function(){return 2}}, // 额外参数  2.2.6+
          headers: { token: "sasasas" }, // 2.2.6+
          accept: "file", //允许上传的文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
          exts: "", // 允许上传的文件后缀。一般结合 accept 参数类设定。
          acceptMime: "", // 2.2.6+ 规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。 acceptMime: 'image/*'（只显示图片文件） acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件）
          size: 50, // 最大允许上传的文件大小 kb ie 10+
          multiple: true, // 是否允许多文件上传。ie 10+
          number: 2, // 设置同时可上传的文件数量 2.2.3+
          drag: true, // 是否接受拖拽的文件上传 ie 10+
          auto: false, //  是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
          bindAction: "#btn2", // 指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'
          choose: function (obj) {
            //  选择文件的回调 该回调会在 before 回调之前。一般用于非自动上传（即 auto: false ）的场景
            //将每次选择的文件追加到文件队列
            var files = obj.pushFile();

            //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
            obj.preview(function (index, file, result) {
              console.log(index); //得到文件索引
              console.log(file); //得到文件对象
              console.log(result); //得到文件base64编码，比如图片
              obj.resetFile(index, file, "123.jpg"); //重命名文件名，layui 2.3.0 开始新增
            });
          },
          before: function (obj) {
            // 文件上传前的回调 在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等
            //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
            layer.load(); //上传loading
          },
          progress: function (n, elem, res, index) {
            // 文件上传进度的回调 2.5.5+
            var percent = n + "%"; //获取进度百分比
            element.progress("demo", percent); //可配合 layui 进度条元素使用

            console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。
            console.log(res); //得到 progress 响应信息
            console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：
            element.progress("demo-" + index, n + "%"); //进度条
          },
          done: function (res, index, upload) {
            //上传完毕回调
            //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
            var item = this.item;
          },
          error: function (index, upload) {
            //请求异常回调
          },
          allDone: function (obj) {
            //多文件上传完毕后的状态回调
            console.log(obj.total); //得到总文件数
            console.log(obj.successful); //请求成功的文件数
            console.log(obj.aborted); //请求失败的文件数
          },
        });

        //重载该实例，支持重载全部基础参数 2.5.0+
        uploadInst.reload({
          accept: "images", //只允许上传图片
          acceptMime: "image/*", //只筛选图片
          size: 1024 * 2, //限定大小
        });

        // 重新上传
        uploadInst.upload();
      });
    </script>
  </body>
</html>
